<template>
  <div>
    <el-form :model="form">
      <el-form-item label="输入发起人信息">
        <el-switch v-model="form.roleFlag" @change="v => userFlag=!v"></el-switch>
      </el-form-item>
      <el-form-item v-if="form.roleFlag">
        <el-input v-model="form.info" placeholder="请输入发起人信息" @blur="emitInfo(form.info)"></el-input>
      </el-form-item>
      <el-form-item label="按用户">
        <el-switch v-model="userFlag" @change="v => form.roleFlag=!v"></el-switch>
      </el-form-item>
      <el-form-item v-if="userFlag">
        <el-select v-model="form" value-key="userId" @change="emitInfo(form)" placeholder="请选择用户">
          <el-option v-for="item in users" :key="item.userId" :label="item.nickName" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "RootConfig",
    props: {
      config: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        showOrgSelect: false,
        form: {
          roleFlag: true,
          info: "admin",
          userId: ""
        },
        userFlag: false,
        users:[]
      }
    },
    computed: {
      select() {
        return this.config.assignedUser
      }
    },
    created() {
      if (this.select.length) {
        this.form.roleFlag = this.select[0].type == 'role' //是不是role角色
        this.form.userFlag = !this.form.roleFlag
        this.roleFlag ? this.form.info = this.select[0].name : this.form.userId = this.select[0].name
      }
    },
    methods: {
      emitInfo(info) {
        console.log(info)
        let obj = [{
          id: "",
          name: info.nickName,
          type: this.form.roleFlag ? "ROLE" : "ASSIGN_USER"
        }]
        this.selected(obj)
      },
      selected(data) {
        this.select.length = 0
        data.forEach(val => this.select.push(val))
      },
      removeOrgItem(index) {
        this.select.splice(index, 1)
      },
      async initOptions(){
        let users=await this.$get('/api/users/list')
        this.users=users.data
      },
    },
    mounted(){
      this.initOptions()
    }
  }
</script>

<style lang="scss" scoped>
  .desc {
    font-size: small;
    color: #8c8c8c;
  }

  .org-item {
    margin: 5px;
  }
</style>
